<template>
  <div class="big"  >
    <div class="top" >
    <div class="mingcheng">
    {{detailArr.productName}}
    </div>
      <div class="liebiao">
      <ul>
      <li><router-link to="">概述</router-link></li>
      <li><router-link to="">参数</router-link></li>
      <li><router-link to="">用户评价</router-link></li>
      </ul>
      </div>
    </div>
    <div class="two">
      <div class="pic">
        <el-carousel :interval="5000" arrow="always" height="518px">
        <el-carousel-item v-for="item in picArr" :key="item.pictureId">
          <img :src="' http://www.codeedu.com.cn/'+item.productPicture">
        </el-carousel-item>
  </el-carousel>
      </div>
      <div class="mingchengt">
     {{detailArr.productName}}
    </div>
    <div class="jieshao">
    {{detailArr.productIntro}}
    </div>
    <div class="ziying">小米自营</div>
    <div class="price">{{detailArr.productSellingPrice}}</div>
    <div class="noprice">{{detailArr.productSellingPrice}}</div>
    <div class="no"></div>
    <div class="heng"></div>
    <div class="qq"></div>
    <div class="red">{{detailArr.productSellingPrice}}</div>
    <div class="shu">{{detailArr.productSellingPrice}}</div>
    <div class="nopricet">{{detailArr.productPrice}}</div>
    <div class="nott"></div>
    <div class="jia"></div>
    <div class="zijia" @click="car">加入购物车</div>
    <div class="allp">总价{{detailArr.productSellingPrice}}</div>
    <div class="like" @click="likee"></div>
    <div class="liz">喜欢</div>
    <div class="dui1"><img src="../assets/Ellipse 5.png" alt=""></div>
    <div class="dui2"><img src="../assets/Ellipse 5.png" alt=""></div>
    <div class="dui3"><img src="../assets/Ellipse 5.png" alt=""></div>
    <div class="dui4"><img src="../assets/Ellipse 5.png" alt=""></div>
    <div class="xiaoz">小米自营</div>
    <div class="xiaof">小米发货</div>
    <div class="tuih">7天无理由退货</div>
    <div class="baoh">7天价格保护</div>
    </div>
  </div>
</template>

<script>
import {detail,addshoppingCart,collect,productcount} from "../api/api"
export default {
    name:'productDetails',
    created(){
      
      if(this.$route.query.row){
          this.datail()
      }else if(this.$route.query.rowo){
        this.datail2()
      }else if(this.$route.query.rowt){
        this.datail3()
      }else if(this.$route.query.rowtt){
        this.datail4()
      }

      console.log(this.productId);
      console.log('detailArr:',this.detailArr);
    },
    data() {
      return {
          productId:1,
        
          detailArr:{
            	
          },
          picArr:{}
          
        
      }
    },
    methods: {
      getId() {
        if(this.$route.query.row) {
          this.productId = this.$route.query.row;
        }else if(this.$route.query.rowo) {
          this.productId = this.$route.query.row0;
        }else if(this.$route.query.rowt) {
          this.productId = this.$route.query.rowt;
        }else if(this.$route.query.rowtt) {
          this.productId = this.$route.query.rowtt;
        }
        return this.productId;
      },
      //查询商品详情
      datail(){
        this.productId = this.$route.query.row;
        detail(this.productId).then(res=>{
            console.log(res);
          this.detailArr = res.data.data
          console.log("tt",this.detailArr);
          this.picArr = res.data.data.pictures
          console.log('jj',this.picArr);
           
       
      })
      },
      datail2(){
        this.productId = this.$route.query.rowo;
        detail(this.productId).then(res=>{
            console.log(res);
          this.detailArr = res.data.data
          console.log("tt",this.detailArr);
          this.picArr = res.data.data.pictures
          console.log('jj',this.picArr);
           
       
      })
      },
      datail3(){
        this.productId = this.$route.query.rowt;  
        detail(this.productId).then(res=>{
            console.log(res);
          this.detailArr = res.data.data
          console.log("tt",this.detailArr);
          this.picArr = res.data.data.pictures
          console.log('jj',this.picArr);
           
       
      })
      },
      datail4(){
        this.productId = this.$route.query.rowtt;         
        detail(this.productId).then(res=>{
            console.log(res);
          this.detailArr = res.data.data
          console.log("tt",this.detailArr);
          this.picArr = res.data.data.pictures
          console.log('jj',this.picArr);
           
       
      })
      },
      //添加购物车
      
      car(){
          addshoppingCart({
            'productId':this.getId()
          }).then(res=>{
            console.log('yy',res);
          })
          productcount().then((res) => {
        
          this.count = res.data.data;
          console.log(this.count);
          this.$store.commit("addNumber", this.count);
        
      });
      },
      likee(){
        console.log(typeof(this.getId()));
      collect(this.productId).then(res=>{
            console.log('55',res);
          })
    }
    },
    
}
</script>

<style scoped>

.top{
  position: relative;
  width: 100%;
  height: 62px;
  border-bottom: 1px  solid #E6E6E6;
}
.mingcheng{
  position: absolute;
  height: 18px;
  left: 344px;
  top: 22px;
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 100%;
  color: #333333;
}
.liebiao{
  position: absolute;
  width: 152px;
  height: 14px;
  left: 1412px;
  top: 24px;
  position: relative;
  
  
  
}
.liebiao ul{
  display: flex;
  width: 152px;
  height: 14px;
  justify-content: space-between;
  position: absolute;
  left: -39px;
  top: -18px;
}
.liebiao li{
  list-style-type: none;
  
}
.liebiao ul li a{
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 100%;
  color: #606266;
  text-decoration: none;
  
  
}
.two{
  width: 100%;
  height: 619px;
  position: relative;
}
.el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  .el-carousel__item img{
    width: 520px;
    height: 518px;
  }
  .pic{
    width: 520px;
    position: absolute;
    top: 48px;
    left: 344px;
  }
  .mingchengt{
  position: absolute;
  height: 29px; 
  left: 930px;
  top: 48px;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-size: 24px;
  line-height: 120%;
  color: #333333;
}
.jieshao{
  position: absolute;
  top: 75px;
  left: 930px;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 120%;
  color: #B0B0B0;
  width: 624px;
  height: 38px;
}
.ziying{
  position: absolute;
  width: 70px;
  height: 19px;
  left: 930px;
  top: 125px;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 120%;
  letter-spacing: 0.75px;
  color: #FF6700;
}
.price{
  position: absolute;
  width: 64px;
  height: 22px;
  left: 920px;
  top: 170px;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 120%;
  letter-spacing: 0.75px;
  color: #FF6700;
}
.noprice{
  position: absolute;
  width: 54px;
  height: 16px;
  left: 988px;
  top: 175px;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 115%;
  letter-spacing: 0.75px;
  color: #B0B0B0;

}
.no{
  position: absolute;
  width: 55px;
  height: 1px;
  left: 988px;
  top: 183px;
  background: #606266;
}
.heng{
  position: absolute;
  width: 642px;
  height: 1px;
  left: 928px;
  top: 220px;
  background: #E0E0E0;
}
.red{
  position: absolute;
  width: 84px;
  height: 16px;
  left: 988px;
  top: 305px;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  color: #606266;
}
.shu{
  position: absolute;
  width: 56px;
  height: 18px;
  left: 1392px;
  top: 305px;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 110%;
  color: #606266;

}
.nopricet{
  position: absolute;
  width: 56px;
  height: 18px;
  left: 1454px;
  top: 305px;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 110%;
  color: #606266;
}
.nott{
  position: absolute;
  width: 55px;
  height: 1px;
  left: 1453px;
  top: 314px;
  background: #606266;
}
.qq{
  position: absolute;
  width: 642px;
  height: 136px;
  left: 928px;
  top: 255px;
  background: #F9F9FA;
}
.jia{
  position: absolute;
  width: 340px;
  height: 56px;
  left: 928px;
  top: 416px;
  background: #FF6700;
  border-radius: 4px;
}
.jia:hover{
  background: #E75D00;
}
.zijia{
  position: absolute;
  width: 80px;
  height: 20px;
  left: 1058px;
  top: 433px;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 125%;
  color: #FFFFFF;
}
.allp{
  position: absolute;
  width: 154px;
  height: 26px;
  left: 962px;
  top: 336px;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-size: 24px;
  line-height: 110%;
  color: #FF6700;

}
.like{
  position: absolute;
  width: 260px;
  height: 56px;
  left: 1309px;
  top: 416px;
  background: #C0C4CC;
  border-radius: 4px;
}
.like:hover{
  position: absolute;
  width: 260px;
  height: 56px;
  left: 1309px;
  top: 416px;
  background: #B0B0B0;
  border-radius: 4px;
}
.liz{
  position: absolute;
  width: 32px;
  height: 20px;
  left: 1420px;
  top: 434px;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 125%;
  color: #FFFFFF;
}
.dui1{
  position: absolute;
  left: 928px;
  top: 541px;
}
.dui2{
  position: absolute;
  left: 1035px;
  top: 541px;
}
.dui3{
  position: absolute;
  left: 1150px;
  top: 541px;
}
.dui4{
  position: absolute;
  left: 1284px;
  top: 541px;
}
.xiaoz{
  position: absolute;
  width: 64px;
  height: 16px;
  left: 947px;
  top: 539px;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  color: #B0B0B0;
}
.xiaof{
  position: absolute;
  width: 64px;
  height: 16px;
  left: 1055px;
  top: 539px;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  color: #B0B0B0;
}
.tuih{
  position: absolute;
  width: 106px;
  height: 16px;
  left: 1170px;
  top: 539px;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  color: #B0B0B0;
}
.baoh{
  position: absolute;
  width: 90px;
  height: 16px;
  left: 1300px;
  top: 541px;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  color: #B0B0B0;
}
</style>